<html>
<head>
<script type="application/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="application/javascript" src="abssoft.js"></script>
<script type="application/javascript" src="1/moment.js"></script>
<script type="application/javascript" src="1/knockout-debug.js"></script>
<script type="application/javascript" src="1/knockout.mapping.js"></script>
<style>
.logo {
    border: 0 none;
    display: block;
    height: 2rem;
    max-height: 2rem;
    max-width: 15rem;
    padding: 0.5rem 0 0 0.75rem;
}
aside {
    background-color: #f2f2f2;
    bottom: 0;
    box-sizing: border-box;
    left: 0;
    max-width: 16.5rem;
    padding: 0;
    position: absolute;
    top: 0;
    width: 16.5rem;
    z-index: 1;
}
a.logo {
    display: block;
    height: 3em;
    left: 0;
    margin: 0;
    padding: 0;
    position: relative;
    top: 0;
    width: 16.5rem;
}
nav a:hover {
    color: #666;
    outline: medium none;
    text-decoration: none;
}
a {
    color: #666;
    text-decoration: none;
}
.vscroll {
    overflow-y: auto;
}
.scrollcontainer {
    box-sizing: border-box;
    
}
nav {
    bottom: 0;
    left: 0;
    margin: 0;
    max-width: 16.5rem;
    padding: 0;
    position: absolute;
    top: 0;
    transform-origin: left top 0;
    transition: all 0.2s ease-in-out 0s;
    width: 16.5rem;
}
.scrollcontainer > .wrapper {
    box-sizing: border-box;
    transform: translateZ(0px);
}
*::-moz-selection {
    background: none repeat scroll 0 0 #b3d4fc;
    text-shadow: none;
}
section {
    background: none repeat scroll 0 0 #f2f2f2;
    bottom: 0;
    box-shadow: -1px 0 0.125rem rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    left: 16.5rem;
    position: static;
    right: 0;
    top: 0;
    transition: all 0.2s ease-in-out 0s;
    z-index: 0;
}
section.content {
    background: none repeat scroll 0 0 #fff;
    bottom: 0;
    box-sizing: border-box;
    left: 0;
    position: absolute;
    right: 0;
    top: 3em;
}
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
	padding: 5px;
	
}
table{
width:80%;
}
.link1{
color: blue;
}
.white {
 font-weight : bolder;
    color: white;
}
</style>
</head>
<body>
<section>
               
<aside class="master">
<nav class="scrollcontainer vscroll">
 <div class="wrapper">
                        <header>
                            <div>
<img  class="logo" src="1/softools.svg" ></img>
</div>
</header>


<ul data-bind="foreach: apps" style='padding-top: 12px; -moz-padding-start:50px;'>
<li >
<span  data-bind="text: Title"></span>


<div data-bind="foreach: Reports">   
   <ul>
<li>
 <a   data-bind="text: Title ,attr: { text: Title }, click: function(data, event) { $root.getAppReport(data,$parent);$root.getAppReportField(data,$parent); $root.getAppReportFieldAuto(data,$parent);  $root.getAppReportFieldId(data,$parent);$root.getAppReportIdField(data,$parent); }" onclick="this.blur();" href="javascript:void(0)"></a>

</li>
</ul>    
</div>
</li>
</ul>		
</div>	
</nav>
</aside>
 <header>
<!--Write code here for header-->
</header>				
<section class="content scrollcontainer vscroll vscroll-scroll responsive-container">
 <div class="wrapper">
<div data-bind="visible: shouldShowMessage">
<img style="margin-left:256px; width: 1000px;" src="Enterprise Application Platform.png"></img>
</div>
  
	<table style="margin-left:266px; border:1">
	<tbody>
	 <tr>
        <th></th>
        <!-- ko foreach: reports7 -->
        <th data-bind="text: Label"></th>
        <!-- /ko -->
    </tr>
	  <!-- ko foreach: {data: reports6, as: 'row'} -->
    <tr>
       <th></th>
        <!-- ko foreach: {data: $parent.reports7, as: 'col'} -->
        <td data-bind="text: row[col.Label()]"></td>
        <!-- /ko -->
    </tr>
    <!-- /ko -->
    </tbody>
</table>
	
	 
          
          
		<table class="abc" id=  "Table11" style="margin-left:266px;width:80%;">
    <tr style="background-color:black;width=80%;">
	<!-- ko foreach: {data:reports7,as:'row'} -->
 <td class="white"  data-bind="text:Label" style="text-align:center;"></td>
 <!-- /ko  -->
  </tr>
</table>	
    <hr />
	
<table class="abc" id=  "Table1" style="margin-left:266px;">
   
 
    <!-- ko foreach: reports6 -->

	
	
	<tbody>
        <tr>
            <td><a class ="link1" data-bind="text: Title, click: function(data, event) { $root.getAppWithChildApps(data,$parent);$root.getSideApp1(data,$parent);$root.getSideApp3(data,$parent);$root.getSideApp4(data,$parent);$root.getSideApp5(data,$parent);$root.getSideApp6(data,$parent); }" onclick="this.blur();" href="javascript:void(0)"></a></td>
			<td style="text-align:right;"data-bind="text:Date.$date"></td>
			<td style="text-align:right;"data-bind="text:PMO"></td>
            <td style="text-align:right;"data-bind="text:Status"></td>
			 <td style="text-align:right;"data-bind="text:Type"></td>
		
        </tr>
    </tbody>

	<!-- /ko  -->
</table>
	<hr />
	<!-- ko foreach: reportschild5 -->
	<div class="hello" style="margin-left:266px;">
	<ul>
		<li data-bind="text: Title"></li>
		<li data-bind="text: Type_Text"></li>
		<li data-bind="text: Involvement"></li>
		<li data-bind="text: Effectiveness"></li>
		<li data-bind="text: Team"></li>
	</ul>
	</div>
		<!-- /ko  -->
</div>
</section>
</section>



</body>
</html>